<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视属性的基本用法</title>
</head>
<body>
  <div id="root">
      <h1 @click="isHot=!isHot">{{weather}}</h1>
  </div>

  <!--
				监视属性watch：
					1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
					2.监视的属性必须存在，才能进行监视！！
					3.监视的两种写法：
							(1).new Vue时传入watch配置
							(2).通过vm.$watch监视



			    	computed和watch之间的区别：
						1.computed能完成的功能，watch都可以完成。
						   只不过computed直接完成的通过watch来做就必须在data内部新定义一个属性，watch直接完成的通过computed属性来做就要借助data内的v-model属性
						2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。因为computed内部的函数要有返回值，所以不能进行异步操作
		 -->



<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>

    new Vue({
        el:'#root',
        data:{
           isHot:false
        },
        computed:{
            weather(){
                return this.isHot? '炎热':'寒冷'
            }
        },
        watch:{
           // 可以监视计算属性
           isHot:{
               immediate: false,
               handler(newValue,oldValue){
                   console.log("监视被修改",newValue,oldValue)
               }
           }
        }
    })


</script>
</body>
</html>